<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'MyJsp.jsp' starting page</title>
	<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
	<script src="./js/echarts.min.js"></script>
	<script src="./js/dark.js"></script>
	<script src="./js/jquery-1.10.2.js"></script>
  </head>
  <body>
 		<div id="balanceChart" style="width:95%; height:450px"></div>
 		<script type="text/javascript">
 			$(function(){
 					var balanceChart = echarts.init(document.getElementById("balanceChart"),'dark');
		 			var date = ${transaction_date};
		 			var balance = ${balance};
		 			//倒序
		 			date.reverse();
		 			balance.reverse();
		 			for(b in date){
		 				date[b]=date[b].replace(" ","\n");
		 			}
		 			var option = {
		 				title: {
		 					text: '资产状况'
		 				},
		 				legend: {
		 					data:['余额']
		 				},
		 				tooltip:{
		 					show: true,
		 					trigger: 'axis'
		 				},
					    splitLine: {
                				show: true
            			},
            			color:['#40E23B'],
		 				xAxis: {
		 					data : date,
		 					type : 'category',
           					boundaryGap : true
		 				},
		 				yAxis: {
            					type : 'value',
            					boundaryGap : true,
								
       					},
		 				series:[{
		 					name : "余额",
		 					type : 'line',
		 					label : {
		 						normal:{
		 							show : true,
		 							formatter : '{c} 元'
		 						}
		 					},
		 					data : balance
		 				}]
		 			};
		 			balanceChart.setOption(option);
		 		});
 		</script>
  </body>
</html>
